<?php

use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use website\helpers\Render;
use common\models\User;
use common\models\Design;
use common\models\UserJob;
use common\models\UserEducation;

$this->addCrumbs('简历管理');
$this->title = '我的简历';
?>
<style>
    #sub-contenter {min-height:260px;}
    #sub-contenter .data-content {position:relative;}
    #photo {position:absolute;width:240px;text-align:center;}
    #photo .imager {height:200px;margin:20px;border-radius:100%;overflow:hidden;}
    #photo .imager img {width:100%;height:100%;}
    #photo .describer {line-height:25px;margin-top:20px;font-size:12px;}
    #photo .editor {line-height:30px;font-size:14px;}
    #basic {margin-left:240px;margin-top:20px;}
    #basic .input-title {font-size:14px;width:120px;}
    #basic .input-block {margin-left:120px;}

    .flyer-form .form-item .input-title {width:130px;}
    .flyer-form .form-item .input-block {margin-left:130px;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'ensume']) ?>
    
    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content">
                <div id="photo">
                    <div class="imager"><img src="<?= Render::upload($user->photo) ?>"></div>
                    <div class="describer">
                        <p class="editor"><a href="<?= Url::to('@web/user/photo') ?>">编辑</a></p>
                        <p class="cl-red">头像尺寸254px * 254px</p>
                        <p class="cl-red">禁止上传模糊头像，含色情色彩等照片</p>
                    </div>
                </div>
                <form class="flyer-form boxing" id="basic">
                    <div class="form-item checker">
                        <div class="input-title">昵称：</div>
                        <div class="input-block">
                            <input class="flyer-input" name="nickname" value="<?= $user->nickname ?>" disabled>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长类目：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::checkbox('category_id', $categories, ArrayHelper::getColumn($user->categories, 'category_id')) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长风格：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::checkbox('style', Design::$styleSelector, ArrayHelper::getColumn($user->styles, 'category_id')) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长类型：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::checkbox('model', $models, ArrayHelper::getColumn($user->models, 'category_id')) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">工作年限：</div>
                        <div class="input-block">
                            <input class="flyer-input" name="work_life" value="<?= User::$workLifeSelector[$user->work_life]['title'] ?>" disabled>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">联系方式：</div>
                        <div class="input-block">
                            <input class="flyer-input" name="mobile" value="<?= $user->mobile ?>" disabled>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">月薪要求：</div>
                        <div class="input-block">
                            <input class="flyer-input" name="salary" value="<?= Render::number($user->salary / 100, 2) ?>" disabled>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">个人评价：</div>
                        <div class="input-block">
                            <textarea class="flyer-textarea" name="describe" disabled><?= $user->describe ?></textarea>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title"></div>
                        <div class="input-block tr">
                            <a class="flyer-button normal border-round cl-white" href="<?= Url::to('@web/designer/informationt') ?>"><i class="icon-edit"></i> 编辑基本信息</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="box-shadow mt-20px mb-20px">
            <div class="data-title" id="education"><span class="h3">个人介绍</span></div>
            <div class="data-content">
                <div class="sub-title"><i></i>教育经历<span class="english">Education</span></div>
                <form class="flyer-form" id="flyer-education" onsubmit="return false;">
                    <div class="form-item">
                        <div class="item-inline">
                            <div class="input-title">就读时间：</div>
                            <div class="input-inline"><input class="flyer-input flyer-date" name="begin" value="<?= Render::value($user, 'education.begin') ?>"></div>
                        </div>
                        <div class="item-inline">
                            <div class="input-title">毕业时间：</div>
                            <div class="input-inline"><input class="flyer-input flyer-date" name="finish" value="<?= Render::value($user, 'education.finish') ?>"></div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="item-inline">
                            <div class="input-title">就读院校：</div>
                            <div class="input-inline"><input class="flyer-input" name="school" value="<?= Render::value($user, 'education.school') ?>"></div>
                        </div>
                        <div class="item-inline">
                            <div class="input-title">院系专业：</div>
                            <div class="input-inline"><input class="flyer-input" name="major" value="<?= Render::value($user, 'education.major') ?>"></div>
                        </div>
                        <div class="item-inline">
                            <div class="input-title">学历学位：</div>
                            <div class="input-inline"><?= Render::select('degree', UserEducation::$degreeSelector, Render::value($user, 'education.degree'), ['flyer' => 'select']) ?></div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="input-title"></div>
                        <div class="input-block">
                            <button class="flyer-button normal border-round" id="save-education"><i class="icon-plus"></i> 保存教育经历</button>
                            <textarea id="flyer-education-json" data-form="#flyer-education" style="display:none;"><?= UserJob::checker() ?></textarea>
                        </div>
                    </div>
                    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
                </form>
                <div class="sub-title mt-40px" id="job"><i></i>工作经历<span class="english">Work Experence</span></div>
                <div class="jobs mb-20px" id="job-list"></div>
                <div class="mt-20px flyer-form">
                    <div class="form-item">
                        <div class="input-title"></div>
                        <div class="input-block"><button class="flyer-button normal border-round" id="add-job"><i class="icon-plus"></i> 添加工作经历</button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 工作经历编辑框 -->
<div class="pt-20px" id="resume-job" style="display:none;">
    <form class="w-1030px flyer-form pr-20px" id="flyer-job" onsubmit="return false;">
        <div class="form-item">
            <div class="item-inline checker">
                <div class="input-title">入职时间：</div>
                <div class="input-inline"><input class="flyer-input flyer-date" name="begin" value=""></div>
            </div>
            <div class="item-inline checker">
                <div class="input-title">离职时间：</div>
                <div class="input-inline"><input class="flyer-input flyer-date" name="finish" value=""></div>
            </div>
        </div>
        <div class="form-item checker">
            <div class="input-title">公司名称：</div>
            <div class="input-block"><input class="flyer-input" name="company" value="" placeholder="xxxxxxx有限公司"></div>
        </div>
        <div class="form-item">
            <div class="item-inline checker">
                <div class="input-title">工作岗位：</div>
                <div class="input-inline"><input class="flyer-input" name="post" value=""></div>
            </div>
            <div class="item-inline checker">
                <div class="input-title">所属类目：</div>
                <div class="input-inline"><?= Render::select('category_id', [], null, ['flyer' => 'select']) ?></div>
            </div>
            <div class="item-inline checker">
                <div class="input-title">工作性质：</div>
                <div class="input-inline"><?= Render::select('nature', UserJob::$natureSelector, null, ['flyer' => 'select']) ?></div>
            </div>
        </div>
        <div class="form-item checker">
            <div class="input-title">公司网址：</div>
            <div class="input-block"><input class="flyer-input" name="website" value="" placeholder="https://www.xxxx.com"></div>
        </div>
        <div class="form-item checker">
            <div class="input-title">职位描述：</div>
            <div class="input-block"><textarea class="flyer-textarea" name="describe"></textarea></div>
        </div>
        <div class="form-item">
            <div class="input-title"></div>
            <div class="input-block">
                <button class="flyer-button normal border-round cl-white" id="save-job">保存工作经历</button>
                <textarea id="flyer-job-json" data-form="#flyer-job" style="display:none;"><?= UserJob::checker() ?></textarea>
            </div>
        </div>
        <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
        <input type="hidden" name="job_id" value="">
    </form>
</div>

<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/categorier.class.js') ?>"></script>
<script src="<?= Render::static('system/category-design.data.js') ?>"></script>
<script>
    var categorierClass = new categorier();
    var checkerJob = new checker();
    var checkerEducation = new checker();
    $(document).ready(function() {
        // 基本信息不可编辑
        $('#basic input, #basic select').attr('disabled', true);
        // 分类
        categorierClass.init({ fix: false, dom: '#flyer-job select[name=category_id]', data: DesignCategories, relate: DesignCategoriesRelation, start: '<?= Yii::$app->params['designCategories'] ?>' });
        // 表单美化
        (new flyer).init({ form: '#user-contenter, #flyer-job' });

        // 保存教育经历
        tableHandler.requestSingle({
            button: '#save-education', isConfirm: false, isAlert: true,
            url: "<?= Url::to('@web/designer/education-update') ?>",
            beforeRequest: function(param) {
                return checkerEducation.validate();
            },
            beforePost: function(param) {
                param.data = $('#flyer-education').serialize();
            },
            requestFail: function(param) {
                layer.msg(param.response.message, { shift: 6 });
            }
        });

        // 工作经历初始化
        handleJobEvent('#add-job');
        var data = $.parseJSON('<?= json_encode($user->getJobs()->asArray()->all()) ?>');
        initJobTemplate(data);

        // 工作经验表单校验
        checkerJob.init({ ruleDom: '#flyer-job-json' });
        // 保存工作经历
        tableHandler.requestSingle({
            button: '#save-job', isConfirm: false, isAlert: false,
            url: "<?= Url::to('@web/designer/job-update') ?>",
            beforeRequest: function(param) {
                return checkerJob.validate();
            },
            beforePost: function(param) {
                param.data = $('#flyer-job').serialize();
            },
            requestFail: function(param) {
                layer.msg(param.response.message, { shift: 6 });
            },
            requestSuccess: function(param) {
                if($('#flyer-job input[name=job_id]').val() == '') {
                    initJobTemplate([param.response.job])
                }
                else {
                    renderJobDetail(param.response.job);
                }
                layer.alert(param.response.message, { icon: 6 }, function() {
                    layer.closeAll();
                });
            }
        });
    });
    
    function handleJobEvent(button)
    {
        // 工作经历渲染页面
        tableHandler.alertDialog({
            button: $(button),
            title: '<i class="icon-edit"></i> 工作经历', area: ['1050px'],
            content: $('#resume-job'), afterAlert: function(params) {
                var id = $(params.mthis).attr('data-id');
                if( ! id) {
                    renderJobForm([]);
                    return true;
                }
                // 填充工作经历表单
                tableHandler.requestSingle({
                    isConfirm: false, isAlert: false,
                    url: "<?= Url::to('@web/designer/job-detail') ?>",
                    beforePost: function(param) {
                        param.data = { id: id };
                        $('#flyer-job').find('input[name=job_id]').val(param.data.id);
                    },
                    requestFail: function(param) {
                        layer.closeAll();
                        layer.msg(param.response.message, { shift: 6 });
                    },
                    requestSuccess: function(param) {
                        renderJobForm(param.response.job);
                    }
                });
                return true;
            }
        });
    }
    
    // 渲染工作经历展示
    function initJobTemplate(data)
    {
        $('#job-list').append(template('job-template', { infos: data }));
        var jobDetail = [];
        for(var i = 0; i < data.length; ++i) {
            jobDetail.push('.job-' + data[i].id);
        }
        var jobDom = jobDetail.join(', ');
        // 名称显示
        tableHandler.renderCategory({ category: $(jobDom).find('.nature'), select: '#flyer-job select[name=nature]' });
        tableHandler.renderCategory({
            category: $(jobDom).find('.category_id'), functionName: function(id) {
                return categorierClass.renderTitles(id);
            }
        });
        handleJobEvent($(jobDom).find('.editor'));
        // 删除工作经历
        tableHandler.requestSingle({
            button: $(jobDom).find('.delete'), isConfirm: true, isAlert: false,
            url: "<?= Url::to('@web/designer/job-delete') ?>",
            beforePost: function(param) {
                param.data = { id: $(param.mthis).attr('data-id') };
            },
            requestFail: function(param) {
                layer.msg(param.response.message, { shift: 6 });
            },
            requestSuccess: function(param) {
                $(param.mthis).parents('.job-detail').remove();
            }
        });
    }
    // 渲染工作经历
    function renderJobDetail(job)
    {
        var lists = ['begin', 'finish', 'company', 'post', 'website', 'nature', 'category_id', 'describe'];
        for(var i = 0; i < lists.length; ++i) {
            $('.job-detail.job-' + job.id + ' .' + lists[i]).text(job[lists[i]]);
        }
        // 名称显示
        tableHandler.renderCategory({ category: $('.job-detail.job-' + job.id).find('.category_id'), select: '#flyer-job select[name=category_id]' });
        tableHandler.renderCategory({ category: $('.job-detail.job-' + job.id).find('.nature'), select: '#flyer-job select[name=nature]' });
    }
    function renderJobForm(job)
    {
        var lists = ['begin', 'finish', 'company', 'post', 'website', 'describe'];
        for(var i = 0; i < lists.length; ++i) {
            if(job[lists[i]] == undefined) {
                job[lists[i]] = '';
            }
            $('#flyer-job [name=' + lists[i] + ']').val(job[lists[i]]);
        }
        if(job.id) {
            $('#flyer-job select[name=category_id]').val(job.category_id).change();
            $('#flyer-job select[name=nature]').val(job.nature).change();
        }
        else {
            $('#flyer-job .flyer-select').each(function(index) {
                $(this).find('ul li:first').click();
            });
        }
        $('#flyer-job input[name=job_id]').val(job.id ? job.id : '');
        $('#flyer-job .checker').removeClass('has-error').removeClass('has-pass');
    }
</script>

<script id="job-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <div class="job-detail job-{{info.id}}">
        <div class="handler">
            <button class="editor flyer-button normal border-round" data-id="{{info.id}}">编辑</button>
            <button class="delete flyer-button normal border-round ml-10px" data-id="{{info.id}}">删除</button>
        </div>
        <i class="squal-spliter icon-stop icon-spring"></i>
        <div class="timer"><p>{{info.begin}}</p><p>/</p><p>{{info.finish}}</p></div>
        <div class="describer">
            <p>公司名称：<span class="company">{{info.company}}</span></p>
            <p>公司网址：<span class="wetsite">{{info.website}}</span></p>
            <p>
                <span class="w-250px">工作岗位：<span class="post">{{info.post}}</span></span>
                <span class="w-250px">行业分类：<span class="category_id">{{info.category_id}}</span></span>
                <span class="w-250px">工作性质：<span class="nature">{{info.nature}}</span></span>
            </p>
            <p>工作描述：<span class="describe">{{info.describe}}</span></p>
        </div>
    </div>
    {{/each}}
    {{/if}}
</script>